<%@ page import="databeans.*"%>
<%
	Employee employee = (Employee)session.getAttribute("employee");
	String employeeUsername = employee.getUsername();
	String employeeFirstName = employee.getFirstName();
	String employeeLastName = employee.getLastName();
%>
<jsp:include page="../common/header.jsp" />

<script type="text/javascript">
	$(document).ready(function() { 
		var loading_html = "<img src=\"view/img/mozilla_blu.gif\"></img> Processing Data... Please wait";

		/*
		$('.create-cust-result').hide();
        $('#create-cust').click(function(e) {
        	var queryString = $('.user-form').formSerialize();
        	//alert(queryString);
			e.preventDefault(); 
			$('.create-cust-result').html(loading_html);
			$('.create-cust-result').slideDown();
			
			$.post(
				    "employeeCreateCustomerAccount.do", //Ajax file
				    queryString,
				    //function that is called when server returns a value.
					    function(html){
				    		//$('.create-cust-result').slideUp();
					        $('.create-cust-result').html(html); // Populate Data through this line
							//alert($('.create-cust-result').height());
							//var ht = $('.create-customer').height();
							//ht += $('.create-cust-result').height();
							//$div.css({ height : ht });
							$('.create-cust-result').slideDown();
					        document.forms['user-form'].reset();
				    	},
				    	"html"
				    );
		}); 
		
        var $div = $('.create-customer');
		var height = $div.height();
		$div.hide().css({ height : 0 });
		$('#create-button').click(function () {
		  if ( $div.is(':visible') ) {
		    $div.animate({ height: 0 }, { duration: 2500, complete: function () {
		        $div.hide();
		        $('#add-cust').removeClass('active');
		      } 
		    });
		  } else {
		    $div.show().animate({ height : height }, { duration: 500 });
		    $('input#txtFirstName').focus();
		    //$('#cust-search').removeClass('active');
       		$('#add-cust').addClass('active');
		  }
		  return false;
		});

		$('#add-cust').click(function () {
		  if ( $div.is(':visible') ) {
		    $div.animate({ height: 0 }, { duration: 2500, complete: function () {
		        $div.hide();
		        $('#add-cust').removeClass('active');
		      } 
		    });
		  } else {
		    $div.show().animate({ height : height }, { duration: 500 });
		    $('input#txtFirstName').focus();
		    //$('#cust-search').removeClass('active');
       		$('#add-cust').addClass('active');
		  }
		  return false;
		});
		
		$('#cancel').click(function(e) {
			e.preventDefault(); 
			if ( $div.is(':visible') ) {
			    $div.animate({ height: 0 }, { duration: 2500, complete: function () {
			        $div.hide();
			        $('#add-cust').removeClass('active');
			      } 
			    });
			  } else {
			    $div.show().animate({ height : height }, { duration: 500 });
			    $('input#txtFirstName').focus();
			  }
		});
		*/
		
		//$('#search-results').hide();
				
		$('.search-user').ajaxForm(function() { 
            $('#search-results').slideDown();
        });
        
        $("#popup").dialog({ bgiframe: true, autoOpen:false, modal: true, closeOnEscape: true, draggable:false, width:800, height:450, position: 'top', buttons: { "Close": function() { $(this).dialog('close'); } } });
		
		
		$('a#pass-refresh').click(function(e) {
			//alert($(this).attr('href'));
			e.preventDefault(); 
			var id = $(this).attr('href');
			var customer_id = id.substring(1,id.length);
			var name = $('span#name').html();
			if (confirm("Are you sure you want to Reset Password for Customer: " + customer_id + " - " + name + " ?")) { 
			 	// do things if OK
				//alert(customer_id);
				$('#popup').html(loading_html);
				$('#popup').dialog('open'); 
				$.post(
					       
					    "employeeResetCustomerPassword.do", //Ajax file
					    {'customerID': customer_id, 'type': "ajax" },
					    
					    //function that is called when server returns a value.
						    function(html){
						        //$('#display').html(data.returnValue);
						        $('#popup').html(html); // Populate Data through this line
					    	},
					    	"html"
					    );
			}
		});
		
		$('a#view-acc').click(function(e) {
			//alert($(this).attr('href'));
			var id = $(this).attr('href');
			var customer_id = id.substring(1,id.length);
			//alert(customer_id);
			e.preventDefault(); 
			$('#popup').html(loading_html);
			$('#popup').dialog('open'); 
			$.post(
				       
				    "employeeViewCustomerAccount.do", //Ajax file
				    {'customerID': customer_id, 'type': "ajax" },
				    
				    //function that is called when server returns a value.
					    function(html){
					        //$('#display').html(data.returnValue);
					        $('#popup').html(html); // Populate Data through this line
					        //$('#trans-history').colorize({ hoverColor:'none', ignoreHeaders :true, hiliteColor :'none' });
				    	},
				    	"html"
				    );
		});
		
		$('a#acc-trans').click(function(e) {
			//alert($(this).attr('href'));
			var id = $(this).attr('href');
			var customer_id = id.substring(1,id.length);
			//alert(customer_id);
			e.preventDefault(); 
			$('#popup').html(loading_html);
			$('#popup').dialog('open'); 
			$.post(
				       
				    "employeeViewTransactionHistory.do", //Ajax file
				    {'customerID': customer_id, 'type': "ajax" },
				    
				    //function that is called when server returns a value.
					    function(html){
					        //$('#display').html(data.returnValue);
					        $('#popup').html(html); // Populate Data through this line
				    	},
				    	"html"
				    );
		});
		
		$('a#pmt-trans').click(function(e) {
			//alert($(this).attr('href'));
			var id = $(this).attr('href');
			var customer_id = id.substring(1,id.length);
			//alert(customer_id);
			e.preventDefault(); 
			$('#popup').html(loading_html);
			$('#popup').dialog('open'); 
			$.post(
				       
				    "employeeViewPaymentHistory.do", //Ajax file
				    {'customerID': customer_id, 'type': "ajax" },
				    
				    //function that is called when server returns a value.
					    function(html){
					        //$('#display').html(data.returnValue);
					        $('#popup').html(html); // Populate Data through this line					        
				    	},
				    	"html"
				    );
		});
		
		var myFile = document.location.toString();
		//alert(myFile);
        if (myFile.match('#')) { // the URL contains an anchor
        var myAnchor = myFile.split('#')[1];
        	//alert(myAnchor);
       		$('li a[id="' + myAnchor + '"]').click();
       		document.forms['user-form'].reset();
       		$('input#txtFirstName').focus();
       		$('#cust-search').removeClass('active');
       		$('#add-cust').addClass('active');
        }
	});
</script>


<title>Carnegie Financial Services - Customer Manager</title>
</head>

<body>
	<div id="container">
    	<div id="header">
        	<h2>Carnegie Financial Services</h2>
    		<jsp:include page="../common/top-menu.jsp" />
      	</div>
      
        <div id="wrapper">
            <div id="content">
            	<div class="padding margin-10"></div>
              <div id="box">
            	<h3><span class="search" style="padding-left:20px;">Current Customers</span></h3>
                <!-- <form action="#" method="get" id="form" class="search-user">
					<div align="center">
						<input name="cust-name" id="cust-name" type="text" autocomplete="off" style="height: 24px"/>
						<input id="button1" type="submit" value="Search Customer" tabindex="15" id="cust-search"/>&nbsp;
					</div>
                </form>
 				-->
                <div id="search-results">
                	<table>
						<thead>
							<tr>
								<th>ID</th>
                            	<th>Customer Name</th>
                                <th>Actions</th>
                            </tr>
						</thead>
						<tbody>
						<%
							Customer[] customers = (Customer[])request.getAttribute("customers");
							if(customers!=null)
							{
								for(int i = 0;i<customers.length;i++) {
						%>
							<tr>
								<td><%=customers[i].getCustomerID()%></td>
                            	<td><a href="#<%=customers[i].getCustomerID()%>" id="view-acc"><span id="name"><%=customers[i].getFirstName() + " " + customers[i].getLastName() %></span></a></td>
                                <td>
                                	<a href="#<%=customers[i].getCustomerID() %>" id="view-acc"><img src="view/img/icons/vcard.png" title="View Account Details" alt="View Account Details"/></a>
                                	<a href="#<%=customers[i].getCustomerID() %>" id="acc-trans"><img src="view/img/icons/application_cascade.png" title="View Account Transactions" alt="View Account Transactions"/></a>
                                	<a href="#<%=customers[i].getCustomerID() %>" id="pmt-trans"><img src="view/img/icons/folder_page.png" title="View Check Transactions" alt="View Check Transactions"/></a>
                                	<a href="#<%=customers[i].getCustomerID() %>" id="pass-refresh"><img src="view/img/icons/arrow_refresh.png" title="Reset Account Password" alt="Reset Account Password"/></a>
                                </td>
                            </tr>
                           <%	} 
                           
                           }%>
						</tbody>
					</table>
                </div>
	          </div>

              <div class="padding margin-10"></div>
              <div id="box" class="create-customer" style="height:530px;">
	            	<h3 id="adduser">Add New Customer</h3>
	                <form name="user-form" id="form" action="employeeCreateCustomerAccount.do" method="post" class="user-form">
	                	<jsp:include page="../common/messages.jsp"/>
	                	Note: All fields are required
	                	<br/> &nbsp;
	                  <fieldset id="personal">
	                    <legend>PERSONAL INFORMATION</legend>
	                    <label for="txtFirstName">First name : </label>
	                    <input name="txtFirstName" id="txtFirstName" type="text" tabindex="1" value="${txtFirstName}"/>
	                    <br />
	                    <label for="txtLastName">Last name : </label> 
	                    <input name="txtLastName" id="txtLastName" type="text" tabindex="2" value="${txtLastName}"/>
	                    <br />
	                    <label for="txtUsername">Username : </label>
	                    <input name="txtUsername" id="txtUsername" type="text" tabindex="3" value="${txtUsername}"/> (Min 8 characters)
	                    <br />
	                    <label for="txtEmail">Email : </label>
	                    <input name="txtEmail" id="txtEmail" type="text" tabindex="4" value="${txtEmail}"/> (eg: john@doe.com)
	                    <br />
	                  </fieldset>
	                  <fieldset id="address">
	                    <legend>Address</legend>
	                    <label for="txtAddrLine1">Street address 1: </label> 
	                    <input name="txtAddrLine1" id="txtAddrLine1" type="text" tabindex="5"" value="${txtAddrLine1}"/>
	                    <br />
	                    <label for="txtAddrLine2">Street address 2: </label> 
	                    <input name="txtAddrLine2" id="txtAddrLine2" type="text" tabindex="6"" value="${txtAddrLine2}"/>
	                    <br />
	                    <label for="txtCity">City : </label>
	                    <input name="txtCity" id="txtCity" type="text" tabindex="7" value="${txtCity}"/>
	                    <br />
	                    <label for="txtState">State/Province : </label>
	                    <select name="txtState" id="txtState" tabindex="8"> 
							<option value="" selected="selected">Select a State</option> 
							<option value="AL">Alabama</option> 
							<option value="AK">Alaska</option> 
							<option value="AZ">Arizona</option> 
							<option value="AR">Arkansas</option> 
							<option value="CA">California</option> 
							<option value="CO">Colorado</option> 
							<option value="CT">Connecticut</option> 
							<option value="DE">Delaware</option> 
							<option value="DC">District Of Columbia</option> 
							<option value="FL">Florida</option> 
							<option value="GA">Georgia</option> 
							<option value="HI">Hawaii</option> 
							<option value="ID">Idaho</option> 
							<option value="IL">Illinois</option> 
							<option value="IN">Indiana</option> 
							<option value="IA">Iowa</option> 
							<option value="KS">Kansas</option> 
							<option value="KY">Kentucky</option> 
							<option value="LA">Louisiana</option> 
							<option value="ME">Maine</option> 
							<option value="MD">Maryland</option> 
							<option value="MA">Massachusetts</option> 
							<option value="MI">Michigan</option> 
							<option value="MN">Minnesota</option> 
							<option value="MS">Mississippi</option> 
							<option value="MO">Missouri</option> 
							<option value="MT">Montana</option> 
							<option value="NE">Nebraska</option> 
							<option value="NV">Nevada</option> 
							<option value="NH">New Hampshire</option> 
							<option value="NJ">New Jersey</option> 
							<option value="NM">New Mexico</option> 
							<option value="NY">New York</option> 
							<option value="NC">North Carolina</option> 
							<option value="ND">North Dakota</option> 
							<option value="OH">Ohio</option> 
							<option value="OK">Oklahoma</option> 
							<option value="OR">Oregon</option> 
							<option value="PA">Pennsylvania</option> 
							<option value="RI">Rhode Island</option> 
							<option value="SC">South Carolina</option> 
							<option value="SD">South Dakota</option> 
							<option value="TN">Tennessee</option> 
							<option value="TX">Texas</option> 
							<option value="UT">Utah</option> 
							<option value="VT">Vermont</option> 
							<option value="VA">Virginia</option> 
							<option value="WA">Washington</option> 
							<option value="WV">West Virginia</option> 
							<option value="WI">Wisconsin</option> 
							<option value="WY">Wyoming</option>
						</select>
	                    <br />
	                    <label for="txtZip" >Zip/Postal Code : </label>
	                    <input name="txtZip" id="txtZip" type="text" tabindex="9" value="${txtZip}"/>
	                  </fieldset>
	                  <div align="center">
	                  <input id="create-cust" type="submit" value="Add Customer" tabindex="10" name="Submit"/> 
	                  <input id="cancel" type="reset" tabindex="11" value="Cancel" />
	                  </div>
	                </form>
	                <!-- 
	                <div class="create-cust-result" style="clear:both;margin-left:20px">
	               	 	<img src="view/img/mozilla_blu.gif"></img> Creating customer... Please Wait
	                	<div class="padding"></div>
	                </div>
	                 -->
                </div>

            </div>

            <jsp:include page="../common/sidebar.jsp" />
      </div>
        <jsp:include page="../common/footer.jsp" />
</div>
<div id="popup" >
</div>
</body>
</html>
